<template>
  <basic-dialog :visible="show"
                minWidth="960px"
                title="领用申请详情"
                isShowClose
                @close="onClose">
    <div class="padding-20">
      <detail-dialog :headList="headList" :detailData="detailData" class="font-size-14"/>
      <div class="page-content">
        <q-table
        :data="tableData"
        :columns="columns"
        row-key="id"
        style="margin: 0px;max-height: 400px"
        class="scroll myTable inherit"
        :loading="isTableLoading"
        :pagination.sync="pagination"
        :hide-bottom="tableData.length > 0"
        no-data-label="暂无数据"
        color="primary"
        >
          <template v-slot:no-data>
            <div class="full-width row flex-center font-size-14" style="color: #999">
              暂无数据
            </div>
          </template>
        </q-table>
        <div class="font-size-16 padding-t-20">备注：{{remark}}</div>
      </div>
    </div>
  </basic-dialog>
</template>
<script>
// import _ from 'lodash'
import { getOneApply } from '../../../boot/spare/parts'
export default {
  name: 'apply-use-detail',
  data () {
    return {
      show: false,
      tableData: [],
      id: null,
      remark: '',
      detailData: {},
      recordData: {},
      isTableLoading: false,
      isShowRecordDialog: false,
      pagination: {
        rowsPerPage: 0
      },
      columns: [
        { name: 'number', label: '备件编号', align: 'left', field: 'number' },
        { name: 'name', label: '备件名称', align: 'left', field: 'name' },
        {
          name: 'categoryName',
          label: '所属分类',
          align: 'left',
          field: 'categoryName'
        },
        { name: 'spec', label: '规格', align: 'left', field: 'spec' },
        { name: 'unitName', label: '单位', align: 'left', field: 'unitName' },
        {
          name: 'sparePartCount',
          label: '库存数量',
          field: 'sparePartCount',
          align: 'left'
        },
        {
          name: 'count',
          label: '领用数量',
          field: 'count',
          align: 'left'
        }
      ]
    }
  },
  computed: {
    headList () {
      const headList = {
        category: '领用种类',
        date: '期望日期',
        orderNumber: '关联维保单',
        departmentName: '领用部门',
        userName: '领用人员'
      }
      return headList
    }
  },
  methods: {
    showDialog (data) {
      this.show = true
      this.recordData = data
      this.getList()
    },
    getList () {
      this.tableData = []
      this.isTableLoading = true
      getOneApply(this.recordData.id).then(ret => {
        this.isTableLoading = false
        this.detailData = ret.data
        this.remark = this.$utils.label(this.detailData.remark, '--')
        this.tableData = ret.data.applyDetails.map(v => {
          return {
            ...v,
            id: v.sparePartId,
            name: v.sparePartName,
            number: v.sparePartNumber,
            categoryName: v.sparePartCategory,
            spec: v.sparePartSpec,
            unitName: v.sparePartUnit
          }
        })
      }).catch(err => {
        console.log(err)
        this.isTableLoading = false
      })
    },
    // 关闭弹窗
    onClose () {
      this.show = false
      this.tableData = []
    },
    // 关闭弹窗
    onRefresh (isRefresh = false) {
      this.recordData = {}
      this.isShowRecordDialog = false
      isRefresh && this.getList()
    }
  }
}
</script>
